/* AMIMACIONES */



@keyframes show-progress{
  0%{
    width: 0%;
  }
}

@keyframes card-show{
  0%{
    opacity: 0;
    translate: 0 150px;
  }
  100%{
    opacity: 1;
    translate: 0 0;
  }
}


@keyframes progress-nav-frame{

  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}


@keyframes navbar-change{
  to{
    background-color: lightslategray;
    background-filter: blur(25px);
    font-size: 15px;
    color: white;
  }
}


@keyframes show-text{
  from{
    opacity: 0;
/*    background-color: gray;*/
  }
  to{
    opacity: 1;
/*    background-color: gray;*/
  }
}


@keyframes show-images{
  0%{
    transform: rotate(-360deg);
    opacity: 0;
/*    translate: 0 100px;*/
    scale: 0.25;
  }
  100%{
/*    transform: rotate(90deg);*/
    opacity: 1;
/*    translate: 0 0;*/
    scale: 1;
  }
}



@keyframes show-progress{
  0%{
    width: 0%;
  }
}


/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
/*        box-shadow: 0px 3px 8px;*/

    }
    100% {
        transform: translateY(0);
    }
}


@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}